<div class="form-horizontal">
    <!--Input - text -->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-5">
                <label class="col-form-label">{{ 'client.details.frontChannelLogoutUri' | translate }} </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.frontChannelLogoutUri-tooltip' | translate"
                    [popoverTitle]="'client.details.frontChannelLogoutUri' | translate" placement="top" container="body">
                    <i class="fa fa-comment-dots"></i>
                </button>
            </div>
            <div class="col-xl-7">
                <input class="form-control" autocomplete="client-frontChannelLogoutUri" [placeholder]="'client.details.frontChannelLogoutUri-tooltip' | translate"
                    [(ngModel)]="model.frontChannelLogoutUri" />
            </div>
        </div>
    </fieldset>
    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-5">
                <label class="col-form-label">{{ 'client.details.frontChannelLogoutSessionRequired' | translate }}
                </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.frontChannelLogoutSessionRequired-tooltip' | translate"
                    [popoverTitle]="'client.details.frontChannelLogoutSessionRequired' | translate" placement="top"
                    container="body">
                    <i class="fa fa-comment-dots"></i>
                </button>
            </div>
            <div class="col-xl-7">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.frontChannelLogoutSessionRequired" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>
    <!--Input - text -->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-5">
                <label class="col-form-label">{{ 'client.details.backChannelLogoutUri' | translate }} </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.backChannelLogoutUri-tooltip' | translate"
                    [popoverTitle]="'client.details.backChannelLogoutUri' | translate" placement="top" container="body">
                    <i class="fa fa-comment-dots"></i>
                </button>
            </div>
            <div class="col-xl-7">
                <input class="form-control" autocomplete="client-backChannelLogoutUri" [placeholder]="'client.details.backChannelLogoutUri-tooltip' | translate"
                    [(ngModel)]="model.backChannelLogoutUri" />
            </div>
        </div>
    </fieldset>
    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-5">
                <label class="col-form-label">{{ 'client.details.backChannelLogoutSessionRequired' | translate }}
                </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.backChannelLogoutSessionRequired-tooltip' | translate"
                    [popoverTitle]="'client.details.backChannelLogoutSessionRequired' | translate" placement="top"
                    container="body">
                    <i class="fa fa-comment-dots"></i>
                </button>
            </div>
            <div class="col-xl-7">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.backChannelLogoutSessionRequired" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>
    <!--Select with tags-->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-5">
                <label class="col-form-label">{{ 'client.details.identityProviderRestrictions' | translate }} </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.identityProviderRestrictions-tooltip' | translate"
                    [popoverTitle]="'client.details.identityProviderRestrictions' | translate" placement="top"
                    container="body">
                    <i class="fa fa-comment-dots"></i>
                </button>
            </div>
            <div class="col-xl-7">
                <tag-input theme='bootstrap' name="identityProviderRestrictions" [modelAsStrings]="true" [placeholder]="'+' + 'client.details.identityProviderRestrictions' | translate"
                    [(ngModel)]="model.identityProviderRestrictions"></tag-input>
            </div>
        </div>
    </fieldset>

    <!--Select with tags-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.allowedCorsOrigins-tooltip' | translate" class="col-xl-4 col-form-label">{{
                'client.details.allowedCorsOrigins' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-5">
                <tag-input theme='bootstrap' name="allowedCorsOrigins" [modelAsStrings]="true" [placeholder]="'+' + ('client.details.allowedCorsOrigins' | translate)"
                    [(ngModel)]="model.allowedCorsOrigins"></tag-input>
            </div>
        </div>
    </fieldset>
    
</div>